<template>
	<div>
		<el-form ref="form" label-width="80px">
			<el-form-item label="标签名称">
			    <el-input size="small" v-model="tag_name"></el-input>
			</el-form-item>
			<div >
				<el-form-item label="品牌系列">
				    <div v-for="(el,i) in brandCateData">
						<div v-if="!el.value.length">
							<el-cascader
								@expand-change="getCheckedNodes"
								size="small"
							    v-model="el.value"
								:options="options">
							</el-cascader>
							<span style="position: relative;top: 3px;left: 5px;cursor: pointer;">
								<i @click="remove(i)" class="el-icon-remove-outline" 
									style="font-size: 20px;margin: 5px;">
								</i>
								<i @click="add" class="el-icon-circle-plus-outline" 
									style="font-size: 20px;">
								</i>
							</span>
						</div>
						<div class="flex" v-if="el.value.length">
							<div style="width: 215px;">
								<span 
									v-for="(item,index) in el.value" :key="index">
									{{item}}
								</span>
							</div>
							<span style="position: relative;top: 3px;left: 5px;cursor: pointer;">
								<i @click="remove(i)" class="el-icon-remove-outline" 
									style="font-size: 20px;margin: 5px;">
								</i>
								<i @click="add" class="el-icon-circle-plus-outline" 
									style="font-size: 20px;">
								</i>
							</span>
						</div>
						
						
						
					</div>
				</el-form-item>
				<el-form-item label="">
				    <el-button type="primary"
						@click="confirm"
						size="mini">
				    	确定
				    </el-button>
					<el-button type="danger"
						v-if="title=='编辑标签'"
						@click="handleClose"
						size="mini">
						删除
					</el-button>
				</el-form-item>
			</div>
			<!-- <div v-if="title=='查看标签'">
				<el-form-item label="品牌系列">
				    <div v-for="(el,i) in brandCateData" :key="i">
						<span v-for="(item,index) in el.value" :key="index">
							{{item}}
						</span>
					</div>
				</el-form-item>
			</div> -->
		</el-form>	
	</div>
</template>

<script>
	export default {
		data(){
			return {
				tag_name:'',
				options:[
					
				],
				value:[],
				brandCateData:[
					{
						value:[]
					}
				]
			}
		},
		props:{
			title:{
				type:String,
				default:'添加标签'
			},
			tagId:{
				type:Number,
				default:0
			},
		},
		mounted() {
			this.getBrand()
			if(this.title=='编辑标签'){
				this.lodeTagData()
			}
		},
		methods:{
			handleClose(){
				if(confirm()){
					this.$post('/goods/delTagData',{id:this.tagId},res=>{
						this.$emit('close')
					})
				}
			},
			lodeTagData(){
				let params = {
					tagId:this.tagId
				}
				this.$post('/goods/getTagData',params,res=>{
					let result = res.data.data[0]
					this.tag_name = result.tag_name
					let arr = result.children
					this.brandCateData = []
					for(let item of arr){
						this.brandCateData.push(
							{
								value:[item.brand,item.cate]
							}
						)
					}
				})
			},
			confirm(){
				let params = {
					tagId:'',
					tag_name:this.tag_name,
					brandCateData:this.brandCateData
				}
				if(this.title=='编辑标签'){
					params.tagId = this.tagId
				}
				this.$post('/goods/addTagData',params,res=>{
					this.$emit('close')
				})
			},
			getBrand(){
				let params = {
					table_name:'hs_brand',
				}
				this.$post('/goods/getBrandListNoPage',params,res=>{
					let result = res.data.data
					for(let item of result){
						item.value = item.brand_name
						item.label = item.brand_name
						item.children = []
					}
					this.options = result
				})
			},
			remove(i){
				if(this.brandCateData.length>1){
					this.brandCateData.splice(i,1)
				}else{
					this.$message.error('只有一个不能删除')
				}
			},
			add(){
				this.brandCateData.push(
					{
						value:[]
					}
				)
			},
			getCheckedNodes(e){
				console.log(e)
				let brand_name = e[0]
				let index = this.options.findIndex((el)=>{
					return el.label == brand_name
				})
	
				let params = {
					table_name:'hs_class',
					brand_name:brand_name,
				}
				this.$post('/goods/getBrandListNoPage',params,res=>{
					let result = res.data.data
					for(let item of result){
						item.value = item.class_name
						item.label = item.class_name
					}
					this.options[index].children = result
				})
				
			},
		}
	}
</script>

<style>
</style>